<template>
  <div class="question" v-if="list">
    <van-dropdown-menu>
      <van-dropdown-item ref="dropdown">
        <!-- 自定义插槽菜单项标题 -->
        <template #title>
          <div class="title">
            <span class="t1">
              面试宝典
            </span>
            <span class="t2">{{ city }}</span>
          </div>
        </template>
        <!-- 自定义插槽菜单内容 -->
        <template #default>
          <van-index-bar :index-list="indexList">
            <!-- 拿到数据后遍历对象 -->
            <div v-for="(value, key, index) in list.citys" :key="index">
              <van-index-anchor class="ancor" :index="key">{{
                key
              }}</van-index-anchor>
              <!-- 遍历对象里value的数组 -->
              <!-- 点击事件点到谁city就赋值谁,同时关闭窗口 -->
              <van-cell
                @click="cityChange(item)"
                class="cellData"
                v-for="(item, index) in value"
                :key="index"
                >{{ item }}</van-cell
              >
            </div>
          </van-index-bar>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>

    <div class="content-title">
      <div class="tag-area">
        <van-tag
          @click="activeIndex = index"
          :class="{ active: activeIndex === index }"
          v-for="(item, index) in cityPositions[city]"
          :key="index"
          class="tag"
          round
          color="#f7f4f5"
          text-color="#74758b"
          >{{ item.name }}</van-tag
        >
      </div>
    </div>
    <div class="middle">
      <div class="top">
        <div class="t1">
          <div class="i1 red"><i class="iconfont">&#xe64f;</i></div>
          <div class="txt">常错题库</div>
        </div>
        <div class="t1">
          <div class="i1 yellow"><i class="iconfont">&#xe654;</i></div>
          <div class="txt">收藏题库</div>
        </div>
      </div>
      <div class="top">
        <div class="t1">
          <div class="i1 blue"><i class="iconfont">&#xe648; </i></div>
          <div class="txt">企业题库</div>
        </div>
        <div class="t1">
          <div class="i1 green"><i class="iconfont">&#xe655;</i></div>
          <div class="txt">已达题库</div>
        </div>
      </div>
      <!-- 环形 -->

      <van-circle
        class="circle"
        v-model="currentRate"
        :rate="30"
        :speed="100"
        layer-color="none"
        :color="gradientColor"
      >
        <div class="c1">
          <div class="txt">顺序刷题</div>
          <div class="num">
            {{ userInfo.correctQuestions.length
            }}<span class="num2">/{{ list.totalCount }}</span>
          </div>
        </div>
      </van-circle>
    </div>
    <!-- 渲染所有的题目 -->
    <div class="bottom" v-if="list.totalCount">
      <div class="b1">累计收录</div>
      <div class="b2">{{ list.totalCount.toLocaleString() }}</div>
    </div>
    <div class="btn">
      <van-button type="info" block class="btn1" @click="goQuestionInto"
        >模拟面试</van-button
      >
    </div>
  </div>
</template>
<script>
import { interviewFilters } from '@/api/question'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      city: '全国',
      list: [],
      //   索引栏
      indexList: [],
      //   岗位
      cityPositions: [],
      //   环形
      currentRate: 0,
      //   渐变色
      gradientColor: {
        '0%': 'rgba(228,1,55,0.70)',
        '100%': 'rgba(228,1,55,0.10)'
      },
      //   点击tag高亮
      activeIndex: 0
    }
  },
  async created () {
    //   一进入页面获取数据
    const res = await interviewFilters()
    console.log(res)
    // 拿到索引栏的数据
    this.indexList = Object.keys(res.data.data.citys)
    // 全部的数据
    this.list = res.data.data
    // 岗位
    this.cityPositions = res.data.data.cityPositions
  },
  mounted () {
    document.body.style.backgroundColor = '#f7f4f5'
  },
  beforeDestroy () {
    document.body.style.backgroundColor = '#ffffff'
  },
  methods: {
    cityChange (item) {
      this.city = item
      this.$refs.dropdown.toggle()
    },
    // 点击跳往面试题
    goQuestionInto () {
      // 加面试的岗位和城市作为参数传送过去
      const _type = this.cityPositions[this.city][this.activeIndex].id
      this.$router.push(
        '/home/questionInto?type=' + _type + '&city=' + this.city
      )
      console.log(_type)
    }
  }
}
</script>
<style lang="less" scoped>
.question {
  .title {
    display: flex;
    justify-content: center;
    text-align: center;
    .t1 {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
    }
    .t2 {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #545671;
      line-height: 16px;
      margin-left: 4px;
      margin-right: 1px;
      padding-top: 4px;
    }
  }
  .ancor {
    background-color: #f7f4f5;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: red;
    line-height: 16px;
    letter-spacing: 0px;
  }
  .cellData {
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #181a39;
    line-height: 22px;
    letter-spacing: 0px;
  }

  .content-title {
    padding: 25px 15px 10px;
    background-color: #fff;
    .tag-area {
      display: flex;
    align-items: center;
      overflow: auto;
      .tag {
        flex: 0 0 auto;
        padding: 5px 8px;
        margin: 0 7px;
      }
    }
    .active {
      color: #fff !important;
      background-color: #00b8d4 !important;
    }
  }
  .middle {
    margin-top: 20px;
    background-color: #fff;
    padding: 0 40px;
    position: relative;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      padding: 15px 0;
      .i1 {
        width: 44px;
        height: 44px;
        line-height: 22px;

        border-radius: 50%;
        position: relative;
        .iconfont {
          font-size: 24px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .red {
        background: linear-gradient(180deg, #ff8080, #ff4949);
      }
      .yellow {
        background: linear-gradient(180deg, #ffda05, #ffb302);
      }
      .txt {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        margin-top: 5px;
        color: #545671;
        line-height: 16px;
        letter-spacing: 0px;
      }
      .blue {
        background: linear-gradient(180deg, #00ddec, #00b8d4);
      }

      .green {
        background: linear-gradient(180deg, #3ee5b1, #1dc779);
      }
    }
    .circle {
      width: 119px;
      height: 119px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url(~@/assets/编组.png);
      background-size: 100%;
      padding: 10px;
      .c1 {
        width: 100px;
        height: 100px;
        background: linear-gradient(180deg, #ff6f92, #e40137);
        border-radius: 50%;
        text-align: center;
        padding: 25px 18px;
        .txt {
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;

          color: #ffffff;
          line-height: 22px;
          letter-spacing: 0px;
        }
        .num {
          margin-top: 5px;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;

          color: #ffffff;
          line-height: 22px;
          letter-spacing: 0px;
        }
      }
    }
  }
  .bottom {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 21px @p15;
    text-align: center;
    background-color: #fff;
    .b1 {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;

      color: #545671;
      line-height: 25px;
      letter-spacing: 0px;
    }
    .b2 {
      margin-top: 21px;
      font-size: 30px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;

      color: #545671;
      line-height: 42px;
      letter-spacing: 1px;
    }
  }
  .btn {
    padding: 0 @p15;
    .btn1 {
      border-radius: 5px;
    }
  }
}
</style>
